<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>世界前二十国家面积统计</title>
    <!-- 引入 Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .chart-container {
            width: 80%;
            max-width: 800px;
            margin: 0 auto;
        }
        .description {
            margin-top: 20px;
            text-align: center;
            color: #555;
        }
    </style>
</head>
<body>
    <h1>世界前二十国家面积统计</h1>
    <div class="chart-container">
        <canvas id="areaChart"></canvas>
    </div>
    <div class="description">
        <p>此图表展示了世界上面积最大的前二十个国家的面积分布情况。</p>
        <p>数据来源：公开统计数据。</p>
    </div>

    <script>
        // 数据：世界上面积最大的前二十个国家及其面积（单位：万平方公里）
        const countries = [
            "俄罗斯", "加拿大", "中国", "美国", "巴西",
            "澳大利亚", "印度", "阿根廷", "哈萨克斯坦", "阿尔及利亚",
            "刚果（金）", "沙特阿拉伯", "墨西哥", "印度尼西亚", "苏丹",
            "利比亚", "伊朗", "蒙古", "秘鲁", "乍得"
        ];
        const areas = [
            1710, 998, 960, 937, 851,
            774, 328, 278, 272, 238,
            234, 215, 196, 191, 188,
            176, 165, 156, 128, 128
        ];

        // 获取 canvas 元素
        const ctx = document.getElementById('areaChart').getContext('2d');

        // 创建扇形图
        const areaChart = new Chart(ctx, {
            type: 'pie', // 饼图
            data: {
                labels: countries, // 国家名称
                datasets: [{
                    label: '面积（万平方公里）',
                    data: areas, // 面积数据
                    backgroundColor: [
                        '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
                        '#FF9F40', '#C9CBCF', '#FFCD56', '#4BACC6', '#F7464A',
                        '#949FB1', '#4D5360', '#AC64AD', '#DCDCDC', '#FDB45C',
                        '#46BFBD', '#FEDCBA', '#ABCDEF', '#DDDDDD', '#ABCABC'
                    ], // 每个扇区的颜色
                    hoverOffset: 4 // 鼠标悬停时的偏移量
                }]
            },
            options: {
                responsive: true, // 图表自适应
                plugins: {
                    legend: {
                        position: 'bottom', // 图例位置
                    },
                    title: {
                        display: true,
                        text: '世界前二十国家面积统计（单位：万平方公里）' // 图表标题
                    }
                }
            }
        });
    </script>
</body>
</html>